﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>商品列表页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <link rel="shortcut icon" href="/favicon.ico" type="/image/x-icon">
    <link rel="apple-touch-icon-precomposed" href="">
    <link rel="stylesheet" href="../source/src/css/main.css?v=080071315"/>
    <link rel="stylesheet" href="../source/src/css/iosSelect.css?v=080071315"/>
    <link rel="stylesheet" href="../source/src/iconfont/iconfont.css?v=080071315"/>


</head>
<body class="list-body">
<!-- 商品列表 -->
<div class="list-page">
    <!-- 搜索 -->
    <div class="search-box clearfix" id="search-box">
        <div class="inner-wrap">
            <!--<select class="choose-month" id="choose-month">
                <option value="">选择年月</option>
                <option value="2018-01">2018年01月</option>
            </select>-->
            <span class="choose-month">
                <span  id="choose-month" data-year="" data-month="" data-date="">选择年月</span>
                <i class="iconfont icon-qingchu" id="clear-month"></i>
            </span>
            <input type="text" class="search-inp" id="search-inp" />  
            <i class="iconfont icon-sousuo" id="icon-sousuo"></i>
        </div>
    </div>
    

    <div class="list-box">
        <ul class="list-ul claerfix" id="list-ul" data-page="1">
            
            
        </ul>
        <div class="add-more-txt">加载中...</div>
    </div>


    <!-- 修改地址弹窗 -->
    <div id="mask" class="hide"></div>
    <div class="up-address-pop hide">
        <div class="hd">
            修改地址
        </div>
        <div class="bd">
            <ul class="cf">
                <li>
                    <div class="label">原地址</div>
                    <div class="v">
                        <input type="text" name="" class="old-address-inp inp" readonly="true"/>
                    </div>
                </li>
                <li>
                    <div class="label">新地址</div>
                    <div class="v">
                        <input type="text" name="" class="new-address-inp inp" />
                    </div>
                </li>
            </ul>
        </div>
        <div class="ft">
            <span class="btn cancel-btn">取消</span>
            <span class="btn sure-btn" id="up-address-btn">确定</span>
        </div>
    </div>


    <!-- 查询快递 -->
    <div class="query-kd-pop hide">
        <div class="hd">
            快递信息
        </div>
        <div class="bd" id="query-kd-bd">
        </div>
        <div class="ft">
            <!-- <span class="btn cancel-btn">取消</span> -->
            <span class="btn sure-btn" >确定</span>
        </div>
    </div>


    <!--底部菜单-->
    <div class="bottom-nav">
        <ul>
            <li class="on">
                <a href="./list.html">
                    <span class="pic">
                        <i class="iconfont icon-index"></i>
                    </span>
                    <span>
                        首页
                    </span>
                </a>
            </li>
            <li>
                <a href="./my.html">
                    <span class="pic">
                        <i class="iconfont icon-my"></i>
                    </span>
                    <span>
                        我的
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>


<script id="list-ul-tpl" type="text/html">
    {{each ItemList as li i}}
    <li class="cf">
        <!--{{if li.IsOK == 1}}
            <i class="iconfont icon-status icon-status-ok"></i>
        {{else}}
            <i class="iconfont icon-status icon-status-fail"></i>
          {{/if}}-->

        <div class="detail">
            <div class="item cf">
                <div class="label">业务编号</div>
                <div class="v">{{li.BillNo}}</div>
            </div>

            <div class="item cf">
                <div class="label">客户名称</div>
                <div class="v">{{li.CustName}}</div>
            </div>
	  		
            <div class="item cf">
                <div class="label">型　　号</div>
                <div class="v">{{li.Name}}</div>
            </div>
            
            <div class="item cf">
                <div class="label">条　　码</div>
                <div class="v">{{li.Barcode}}</div>
            </div>
        
            <div class="item cf">
                <div class="label">快递公司</div>
                <div class="v">{{li.KDCompany}}</div>
            </div>

            <div class="item cf">
                <div class="label">快递单号</div>
                <div class="v">{{li.KDBillNo}}</div>
            </div> 
            
          
            
            <div class="item cf">
                <div class="label">接修时间</div>
                <div class="v">{{li.JXDate}}</div>
            </div>
        
            <div class="item cf">
                <div class="label">检测时间</div>
                <div class="v">{{li.JCDate}}</div>
            </div>

         

            <div class="item cf">
                <div class="label">检测报告</div>
                <div class="v">{{li.JCReport}}</div>
            </div>

            <div class="item cf">
                <div class="label">客户地址</div>
                <div class="v address-v">{{li.CustAddress}}</div>
            </div>
        </div>

        <div class="btn-box" data-billno="{{li.BillNo}}" data-kdbillno="{{li.KDBillNo}}" data-address="{{li.CustAddress}}" data-kdcompany="{{li.KDCompany}}">
            <div class="update-address btn fl {{li.IsOK == 1 ? 'disabled' : ''}}">
                <span class="btn-span cf">
                    <i class="iconfont icon-xiugai"></i>
                    <span class="txt">修改地址</span>
                </span>
            </div>
            <div class="check-address btn fr text-c {{li.IsOK == 1 ? 'disabled' : ''}}">
                <span class="btn-span cf">
                    <i class="iconfont icon-queren"></i>
                    <span class="txt">确认地址</span>
                </span>
            </div>
            <div class="kd-query btn fl text-r">
                <span class="btn-span cf">
                    <i class="iconfont icon-chaxun"></i>
                    <span class="txt">快递查询</span>
                </span>
            </div>
        </div>
    </li>
    {{/each}}
</script>

<script src="../source/plugin/zepto.min.js"></script>
<script src="../source/plugin/iosSelect.js"></script>
<script src="../source/plugin/artTemplate.js"></script>
<script src="../source/src/js/common.js"></script>
<script>
    $(function(){
        var init ={
            submitFlag:true,
            totalPage:1,
            scrolltop:0,
            curUpdateBtn:null,
            curCheckBtn:null,
            year:'',
            month:'',
            toLogin:function(){
                if( !decodeURIComponent(getCookie('username')) ){ //如果没有用户名 就跳转登录
                    // location.href = './login.html'
                    location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbf087788c7717a53&redirect_uri=http%3A%2F%2Fwww.artsound.cn%2Flichaonew%2Fpages%2Findex.html&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
                }
            },
            apiGetList:function(){
                var _this = this;
                var inJson = {
                    "query":$('#search-inp').val(),				           /*搜索内容*/
                    "pageindex":1,				       /*页码*/
                    "pagecount":4,				       /*每页获取商品个数*/
                    "year":_this.year,
                    "month":_this.month,
                    "key":user.key,
                    "account":user.account,
                    "username":decodeURIComponent(getCookie('username')),   /*用户名*/
                };

                $.ajax({
                    url:apiUrl+'/GetItemsQuery',
                    type:'GET',
                    data:{"json":JSON.stringify(inJson)},
                    //dataType :'jsonp',
                    success:function(datas){
                        var html = template('list-ul-tpl', datas);
                        _this.totalPage = datas.ItemList[0] ? datas.ItemList[0].Count*1 : 0;

                        console.log(_this.totalPage)
                        if(_this.totalPage == 0){
                            $('.add-more-txt').html('暂无数据')
                        }else if(_this.totalPage > 1){
                            $('.add-more-txt').html('加载中...')
                        }else{ //只有1页的情况
                            $('.add-more-txt').html('')
                        }
                        $('#list-ul').html(html);
                    },
                    error:function(datas){
                        console.log(datas)
                    }
                });
            },
            render:function(){
                this.apiGetList();

                // var datas = {
                //         "ItemList": [
                //             {
                //                 "BillNo": "B00001",
                //                 "Barcode": "123456789",
                //                 "JXDate": "2018-01-01 15:33:40",
                //                 "JCDate": "2018-01-03 15:33:40",
                //                 "JCReport": "注册用户进入个人中心，对比用户账号手机与已预约手机号，未预约过情况下，展示如下",
                //                 "CustAddress": "广东省广州市白云区xxx路xxx小区",
                //                 "KDBillNo": "KD001KD001KD001",
                //                 "KDCompany": "顺丰快递",
                //                 "Count": "10",
                //                 "IsOK":"1"
                //             },
                //             {
                //                 "BillNo": "B00001",
                //                 "Barcode": "123456789",
                //                 "JXDate": "2018-01-01 15:33:40",
                //                 "JCDate": "2018-01-03 15:33:40",
                //                 "JCReport": "说明1说明1说明1说明1说明1说明1说明",
                //                 "CustAddress": "广东省广州市白云区xxx路xxx小区",
                //                 "KDBillNo": "KD001KD001KD001",
                //                 "KDCompany": "顺丰快递"
                //             },
                //             {
                //                 "BillNo": "B00001",
                //                 "Barcode": "123456789",
                //                 "JXDate": "2018-01-01 15:33:40",
                //                 "JCDate": "2018-01-03 15:33:40",
                //                 "JCReport": "说明1说明1说明1说明1说明1说明1说明",
                //                 "CustAddress": "广东省广州市白云区xxx路xxx小区",
                //                 "KDBillNo": "KD001KD001KD001",
                //                 "KDCompany": "顺丰快递"
                //             },
                //             {
                //                 "BillNo": "B00001",
                //                 "Barcode": "123456789",
                //                 "JXDate": "2018-01-01 15:33:40",
                //                 "JCDate": "2018-01-03 15:33:40",
                //                 "JCReport": "说明1说明1说明1说明1说明1说明1说明",
                //                 "CustAddress": "广东省广州市白云区xxx路xxx小区",
                //                 "KDBillNo": "KD001KD001KD001",
                //                 "KDCompany": "顺丰快递"
                //             },
                
                //         ]
                //     }
                
                // var html = template('list-ul-tpl', datas);
                // this.totalPage = datas.ItemList[0].Count;
                // $('#list-ul').html(html);
            },
            clearMonth:function(){
                var _this = this;
                $('#clear-month').click(function(){
                    $(this).hide();
                    $('#choose-month').attr({'data-year':'','data-month':''}).html('选择年月');
                    _this.year = "";
                    _this.month = "";

                    // 初始化时间
                    var now = new Date();
                    var nowYear = now.getFullYear();
                    var nowMonth = now.getMonth() + 1;
                    $('#choose-month').attr('data-year', nowYear);
                    $('#choose-month').attr('data-month', nowMonth);
                    // _this.initChooseDate();
                })

            },
            initChooseDate:function(){
                var _this = this;
                var selectDateDom = $('#choose-month');
                var showDateDom = $('#choose-month');

                // 初始化时间
                var now = new Date();
                var nowYear = now.getFullYear();
                var nowMonth = now.getMonth() + 1;
                showDateDom.attr('data-year', nowYear);
                showDateDom.attr('data-month', nowMonth);
                // 数据初始化
                function formatYear (nowYear) {
                    var arr = [];
                    for (var i = nowYear - 10; i <= nowYear + 5; i++) {
                        arr.push({
                            id: i + '',
                            value: i + '年'
                        });
                    }
                    return arr;
                }
                function formatMonth () {
                    var arr = [];
                    for (var i = 1; i <= 12; i++) {
                        arr.push({
                            id: i + '',
                            value: i + '月'
                        });
                    }
                    return arr;
                }

                var yearData = function(callback) {
                    callback(formatYear(nowYear))
                }
                var monthData = function (year, callback) {
                    callback(formatMonth());
                };
                selectDateDom.bind('click', function () {
                    var oneLevelId = showDateDom.attr('data-year');
                    var twoLevelId = showDateDom.attr('data-month');

                    var iosSelect = new IosSelect(2,
                        [yearData, monthData],
                        {
                            title: '选择年月',
                            sureText:'搜索',
                            itemHeight: 35,
                            oneLevelId: oneLevelId,
                            twoLevelId: twoLevelId,
                            showLoading: true,
                            callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                                showDateDom.attr('data-year', selectOneObj.id);
                                showDateDom.attr('data-month', selectTwoObj.id);
                                _this.year = selectOneObj.id;
                                _this.month = selectTwoObj.id;
                                showDateDom.html(selectOneObj.value + selectTwoObj.value);
                                // 显示清除按钮
                                $('#clear-month').show();

                                _this.apiGetList();
                            }
                        });
                });

            },
            search:function(){
                var _this = this;

                $('#search-box').on('click','#icon-sousuo',function(){
                    // var inp = $('#search-inp');
                    // if($.trim(inp.val())!=""){
                    //     _this.searchTxt = inp.val();  //给滚动加载的时候用
                        _this.apiGetList();
                        /*var inJson = {
                            "query":_this.searchTxt,			/!*搜索内容*!/
                            "pageindex":1,				       /!*页码*!/
                            "pagecount":4,				       /!*每页获取商品个数*!/
                            "year":_this.year,
                            "month":_this.month,
                            "key":user.key,
                            "account":user.account,
             		         "username":decodeURIComponent(getCookie('username')),   /!*用户名*!/
                        };

                        $.ajax({
                            url:apiUrl+'/GetItemsQuery',
                            type:'GET',
                            data:{"json":JSON.stringify(inJson)},
                            //dataType :'jsonp',
                            success:function(datas){
                                // console.log(datas);
                                var html = template('list-ul-tpl', datas);
                                $('#list-ul').html(html);
                            },
                            error:function(datas){
                                // console.log(datas)
                            }
                        });*/
                    // }
                });
            },
            showMorePage:function(){ //滚动加载更多
                var _this = this;

                window.onload=function(){
                    var scrollTimer = null;
                    var listUl = $('#list-ul');
                    $(window).scroll(function(){
                        clearTimeout(scrollTimer);
                        function showMore(){
                            if($('body,html').height() - $(window).scrollTop() -$(window).height() <= 160){
                                var currentPage = listUl.attr('data-page');
                                var totalPage = Math.ceil(_this.totalPage/4);
                                console.log('totalPage',totalPage)
                                console.log('currentPage',currentPage)
                                currentPage++;

                                if(currentPage<=totalPage){
                                    listUl.attr('data-page',currentPage);

                                    var inJson = {
                                        "query":$('#search-inp').val(),			/*搜索内容*/
                                        "pageindex":currentPage,				           /*页码*/
                                        "pagecount":4,				          /*每页获取商品个数*/
                                        "key":user.key,
                                        "year":_this.year,
                                        "month":_this.month,
                                        "account":user.account,
                                        "username":decodeURIComponent(getCookie('username')),   /*用户名*/
                                    };

                                    $.ajax({
                                        url:apiUrl+'/GetItemsQuery',
                                        type:'GET',
                                        data:{"json":JSON.stringify(inJson)},
                                        //dataType :'jsonp',
                                        success:function(datas){
                                            console.log(datas);
                                            var html = template('list-ul-tpl', datas);
                                            $('#list-ul').append(html);

                                            // 是否还有更多提示
                                            if(currentPage==totalPage || totalPage == 1){
                                                $('.add-more-txt').html('没有更多了~')
                                            }else{
                                                $('.add-more-txt').html('加载中...')
                                            }
                                        },
                                        error:function(datas){
                                            console.log(datas)
                                        }
                                    });

                                    
                                }else{
                                    listUl.attr('data-page',totalPage);
                                    return false;
                                }
                            }
                        }

                        scrollTimer = setTimeout(function(){
                            showMore();
                        },200)
                    });
                }
            },
            checkAddress:function(){ //确认地址
                var _this = this;
                $('.list-box').on('click','.check-address',function(){
                    var $this = $(this);
                    if($this.hasClass('disabled')) return false;

                    var $btnBox = $(this).parents('.btn-box');

                    _this.curCheckBtn = $btnBox.find('.check-address');
                    _this.curUpdateBtn = $btnBox.find('.update-address');

                    var inJson = {
                        "username":decodeURIComponent(getCookie('username')),	/*用户名*/
                        "billno":$btnBox.attr('data-billno'),	/*检修单号*/
                        "address":$btnBox.attr('data-address'),	/*地址*/
                        "key":user.key,
                        "account":user.account
                    }

                    $.ajax({
                        url:apiUrl+'/CheckAddress',
                        type:'GET',
                        data:{"json":JSON.stringify(inJson)},
                        //dataType :'jsonp',
                        success:function(datas){
                            show_error_tip({
                                str:'地址确认成功'
                            });
                            $this.addClass('disabled');

                            _this.curCheckBtn.addClass('disabled');
                            _this.curUpdateBtn.addClass('disabled');
                        },
                        error:function(datas){
                            console.log(datas)
                        }
                    });
                })
            },
            showUpAddressPop:function(){ // 修改地址
                var _this = this;
                $('.list-box').on('click','.update-address',function(){

                    if($(this).hasClass('disabled')) return false;
                    var $btnBox = $(this).parents('.btn-box');

                    // 映射给updAddress() 方法，成功修改后禁止按钮点击
                    _this.curCheckBtn = $btnBox.find('.check-address');
                    _this.curUpdateBtn = $btnBox.find('.update-address');

                    $('#mask').show();
                    $('.up-address-pop').show().find('.old-address-inp').val($btnBox.attr('data-address'));
                    
                    // console.log($(window).scrollTop())
                    _this.scrolltop = $(window).scrollTop();
                    $('html,body').css({'height':$(window).height()+'px','overflow':'hidden'});
                })
            },
            closeUpAddressPop:function(){
                var _this = this;
                $('.up-address-pop').find('.cancel-btn').click(function(){
                    // $('#mask').hide();
                    // $('.up-address-pop').hide().find('input').val('');

                    // $('body,html').css({'height':'auto','overflow':'auto'});
                    // $(window).scrollTop(_this.scrolltop);
                    // _this.scrolltop = 0;
                    _this.closePopHandle();
                    
                })
            },
            closePopHandle:function(){
                var _this = this;
                $('#mask').hide();
                $('.up-address-pop').hide().find('input').val('');

                $('body,html').css({'height':'auto','overflow':'auto'});
                $(window).scrollTop(_this.scrolltop);
                this.scrolltop = 0;
            },
            updAddress:function(){
                var _this = this;
                $('#up-address-btn').on('click',function(){
                    var $btnBox = $(_this.curUpdateBtn).parents('.btn-box');

                    var newAddress = $('.new-address-inp').val().trim();
                    if(newAddress !== ''){
                        var inJson = {
                            "username":decodeURIComponent(getCookie('username')),	/*用户名*/
                            "billno":$btnBox.attr('data-billno'),	/*检修单号*/
                            "oldaddress":$btnBox.attr('data-address'),
                            "address":newAddress,	/*新地址*/
                            "key":user.key,
                            "account":user.account
                        }

                        $.ajax({
                            url:apiUrl+'/UpdAddress',
                            type:'GET',
                            data:{"json":JSON.stringify(inJson)},
                            //dataType :'jsonp',
                            success:function(datas){
                                show_error_tip({
                                    str:'恭喜，地址修改成功！'
                                });

                                _this.curCheckBtn.parents('li').find('.address-v').text(newAddress) 

                                _this.curCheckBtn.addClass('disabled');
                                _this.curUpdateBtn.addClass('disabled');

                                _this.closePopHandle(); // 修改成功关闭弹窗
                            },
                            error:function(datas){
                                console.log(datas)
                            }
                        });
                    }else{
                        show_error_tip({
                            str:'请填写新地址！'
                        });
                        return false;
                    }
                })
            },
            showKdPop:function(){
                var _this = this;
                $('.list-box').on('click','.kd-query',function(){
                    var $btnBox = $(this).parents('.btn-box');
                    
                    var inJson = {
                        "username":decodeURIComponent(getCookie('username')),	/*用户名*/
                        "billno":$btnBox.attr('data-kdbillno'),	/*检修单号*/
                        "kdcompany":$btnBox.attr('data-kdcompany'),	/*快递公司*/
                        "key":user.key,
                        "account":user.account
                    }

                    $.ajax({
                        url:apiUrl+'/QueryKD',
                        type:'GET',
                        data:{"json":JSON.stringify(inJson)},
                        //dataType :'jsonp',
                        success:function(datas){
                            if(datas.Success == true){
                                $('#query-kd-bd').html(datas.Msg);

                                $('#mask').show();
                                $('.query-kd-pop').show();
                                
                                // console.log($(window).scrollTop())
                                _this.scrolltop = $(window).scrollTop();
                                $('html,body').css({'height':$(window).height()+'px','overflow':'hidden'});
                            }else{
                                show_error_tip({
                                    str:'查询失败请重试'
                                });
                            }
                        },
                        error:function(datas){
                            // console.log(datas)
                            show_error_tip({
                                str:'查询失败请重试'
                            });
                        }
                    });
                    
                })
            },
            closeKdPop:function(){
                var _this = this;
                $('.query-kd-pop').find('.sure-btn').click(function(){
                    $('#mask').hide();
                    $('.query-kd-pop').hide().find('#query-kd-bd').html('');

                    $('body,html').css({'height':'auto','overflow':'auto'});
                    $(window).scrollTop(_this.scrolltop);
                    _this.scrolltop = 0;
                    
                })
            },
           
            init:function(){
                this.toLogin();
                this.render();
                this.search();
                this.initChooseDate();
                this.clearMonth();
                this.showMorePage();
                this.checkAddress();

                this.showUpAddressPop();
                this.closeUpAddressPop();
                this.updAddress();

                this.showKdPop();
                this.closeKdPop();


            }
        };
        init.init();
    });
</script>
</body>
</html>